<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>武汉理工大学出版社</title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css">
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body style="background-color: #fff;">
		<!-- 头部 -->
		<div id="header"></div>
		
		<div id="bootstrap"></div>
		
		<div class="sales_zone" id="app" >
			<div class="">
				<div class="sales_zone_nav" v-if="labelName=='SZFW'">
					<div class="titles">
						<div>
							<p class="p1">资源下载</p>
							<p class="p2">DIGITAL SERVICE</p>
						</div>
					</div>
					<div class="nav_list">
						<ul>
							<li v-for="(item,index) in salesZoneList" @click="onSalesZone(index,item.name)" :style="{'background': szCur==index?'#b3161d':''}">
								<div class="nav_list_left">
									<img v-if="szCur==index" class="img1" :src="szCur==index?'static/xzIcon1.png':''">
									<span :style="{'color': szCur==index?'#fff':''}">{{item.name}}</span>
								</div>
								<img class="img2" :src="szCur==index?'static/xzIcon2.png':'static/wxzIcon.png'"/>
							</li>
						</ul>
					</div>
				</div>
				<div class="sales_zone_nav" v-if="labelName=='TSZX'">
					<div class="titles">
						<div>
							<p class="p1">相关图书推荐</p>
							<p class="p2">BOOK RECOMMENDATION</p>
						</div>
					</div>
					<div class="book_list" style="width: 3.6rem">
						<ul>
							<li v-for="(item,index) in bookLists" @click="openDetail(item.id)">
								<img :src="imgUrl+item.coverImg">
								<div class="content">
									<p class="title">{{item.bookName}}</p>
									<p class="text">作者：{{item.bookAuthor}}</p>
									<p class="text" style="margin: 0;"><span>￥{{item.discountPrice}}</span></p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div style="flex: 1;">
				<div class="book_list">
					<ul>
						<li style="border: 0.01rem solid #ddd;background-color: #fff" v-if="digitalFlag">
							<img style="width: 2.2rem;height: 3rem;margin-right: 0.3rem;" :src="imgUrl+books.coverImg">
							<div class="content">
								<p class="title" style="font-size: 0.22rem;">{{books.bookName}}</p>
								<p class="text">载体：{{books.carrier}}</p>
								<p class="text">盘片数：{{books.platterNum}}</p>
								<p class="text">ISBN：{{books.isbn}}</p>
								<p class="text">出版单位：{{books.publishHouse}}</p>
								<p class="text">出版时间：{{books.publishTime}}</p>
								<p class="text" style="margin: 0;">定价：<span>￥{{books.discountPrice?books.discountPrice:books.originalPrice}}</span></p>
								<div class="texts">
									<p class="p1" @click="xcx = true">购买</p>
									<p class="p2"  @click="video = true">预览</p>
								</div>
							</div>
						</li>
						<li style="border: 0.01rem solid #ddd;background-color: #fff" v-else>
							<img style="width: 2.2rem;height: 3rem;margin-right: 0.3rem;" :src="imgUrl+books.coverImg">
							<div class="content">
								<p class="title" style="font-size: 0.22rem;">{{books.bookName}}</p>
								<p class="text">作者：{{books.bookAuthor}}</p>
								<p class="text">ISBN：{{books.isbn}}</p>
								<p class="text">出版社：{{books.publishHouse}}</p>
								<p class="text">出版时间：{{books.publishTime}}</p>
								<p class="text">版次：{{books.bookVersion}} &nbsp;&nbsp; 页数：{{books.bookTotalPage}} &nbsp;&nbsp; 开本：{{books.bookSize}}</p>
								<p class="text" style="margin: 0;">定价：<span>￥{{books.discountPrice}}</span></p>
								<div class="texts">
									<p class="p1" @click="xcx = true">购买</p>
									<p class="p2" @click="show = true">试读</p>
									<p v-if="books.showSample == 1" class="p3" @click="openApply()">样书申请</p>
									<p v-if="books.digitalProductUrl" class="p2" style="width: 1.1rem" @click="downloadFile(imgUrl+books.digitalProductUrl,books.bookName)">数字资源下载</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="four_categories" >
					<ul class="header">
						<li v-for="item,index in heaList" :class="cur==index?'cur':''" @click="onHead(index)">{{item}}</li>
					</ul>
					<div class="content" v-html="content" v-if="cur!=4">
						
					</div>
					<div class="give_service_to" v-else>
						<ul>
							<li v-for="item in books.bbooksServiceList" @click="onDetail(item)">
								<div class="imgs">
									<img :src="imgUrl+item.img">
								</div>
								<p>{{item.remark}}</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		
			<div class="mask" v-show="show">
				<div class="bullet_box">
					<div class="title">请选择试读方式</div>
					<div class="checkbox">
						<div class="checkbox_item" v-for="item,index in checkList" :key="index" @click="onCheck(index)">
							<img :src="item.show?'static/checkIcon.png ':'static/unchecked.png'">
							<span>{{item.name}}</span>
							<span v-if="index==1" style="color: #ae0c17;font-size: 0.15rem">(联系出版社获取)</span>
						</div>
					</div>
					<div class="input" v-if="checkList[1].show">
						<input placeholder="请输入增值码" v-model="addCode"/>
					</div>
					<div class="button">
						<button @click="onBut(books,addCode,flag)">确认提交</button>
					</div>
					<img class="close" src="static/closeIcon.png" @click="show = false">
				</div>
			</div>

			<div class="mask" v-show="video">
				<div class="video">
					<video :src="imgUrl+books.bookUrl" controls="controls"></video>
					<img class="close" src="static/closeIcon.png" @click="video = false">
				</div>
			</div>

			<div class="mask" v-show="xcx">
				<div class="xcx_box">
					<div class="title">请前往"出版社小程序"购买</div><br/><br/>
					<img   src="./img/xcx.png"
						 style="width: 2rem; height:2rem; margin-bottom: 0.1rem; vertical-align: middle;"/>
					<img class="close" src="static/closeIcon.png" @click="xcx = false">
				</div>
			</div>
			
			<!-- 加载中 -->
			<div class="load_page" v-show="isLoadingShow">
				<div class="content">
					<div class="item">
						<i class="loader --1"></i>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 底部 -->
		<div id="footer"></div>

	</body>
	<script>

		function getQueryVariable(variable)
		{
			const query = window.location.search.substring(1);
			const vars = query.split("&");
			for (var i=0;i<vars.length;i++) {
				var pair = vars[i].split("=");
				if(pair[0] == variable){return pair[1];}
			}
			return(false);
		}
		var name = window.location.href.split("&")[0].split("=")[1];
		if(name=='ZYXZ'){
			title = 1;
		}else{
			title = 0
		}
		const App = {
			data() {
				return {
					addCode:'',
					flag:0,
                    apiUrl:'http://dbs.wutp.com.cn/CM-API',
					imgUrl:'http://dbs.wutp.com.cn/CM-API',
					heaList:['简介','目录','获奖情况','书评','增值服务'],
					cur:0,
					introduction:'',
					directory:'',
					awards:'',
					bookReview:'',
					bookLists:[],
					books:'',
					content:'',
					show:false,
					video:false,
					xcx:false,
					digitalFlag:false,
					labelName:'',
					checkList:[{
						name:'普通试读',
						show:true
					},{
						name:'增值码试读',
						show:false
					}],
					szCur:title,
					szName:title==0?'数字产品':'资源下载',
					salesZoneList:[
						{
							name:'数字产品'
						},
						{
							name:'资源下载'
						}
					],
					isLoadingShow:false
				}
			},
			mounted(){
				var href = window.location.href.split("&")[2].split("=")[1]+'='+window.location.href.split("&")[2].split("=")[2];
				console.log("hrefs",href)
				sessionStorage.setItem('href',href);
				this.getBooksDetail()
				this.getRecommendBooks()
			},
			methods:{
				onSalesZone(e,n){
					this.szCur = e;
					this.szName = n;
					console.log(this.szName)
					this.pageIndex = '1';
					this.pageSize = '10';
					if(e==1){
						window.location.href="resource.html?name=ZYXZ";
					}else{
						window.location.href="resource.html?name=SZFW";
					}
					
				},
				async getBooksDetail() {
					let that = this;
					that.isLoadingShow = true
					const id = getQueryVariable("id");
					const name = getQueryVariable("name");
					that.labelName = name
					if(name == 'SZFW'){
						that.digitalFlag = true
						that.url = that.apiUrl+"/resourceDownloadApi/getDigitalProductDetail?id="+id
					}else{
						that.digitalFlag = false
						that.url= that.apiUrl+"/booksApi/getBooksDetail?id=" + id
					}
					await axios({
						method: "get",
						url: that.url,
					}).then(function (res) {
						console.log(res.data.data);
						if(res.data.data){
							that.books = res.data.data
							that.introduction = res.data.data.introduction
							that.directory = res.data.data.directory
							that.awards = res.data.data.awards
							that.bookReview = res.data.data.bookReview
							that.content = that.introduction
							that.isLoadingShow = false
						}
						
					})
				},
				async getRecommendBooks() {
					let that = this;
					const id = getQueryVariable("id");
					await axios({
						method: "get",
						url: that.apiUrl+"/booksApi/getRecommendBooks?pageNum=1&pageSize=5&id=" + id,
					}).then(function (res) {
						that.bookLists = res.data.data
					})
				},
				onHead(e){
					this.cur = e;
					this.content = e==0?this.introduction:(e==1?this.directory:(e==2?this.awards:this.bookReview));
				},
				openDetail(id){
					let hrefs = window.location.href;
					window.location.href="reDetails.html?name=TSZX&id="+id+'&href='+hrefs;
				},
				openApply(){
					window.location.href="apply.html?name=YSSQ";
				},
				onDetail(item){
					if(item.type == 1){
						window.location.href= item.url
					}else{
						const fileUrl = this.imgUrl + item.url
						axios(fileUrl, {//pdf的位置
							responseType: 'blob', //重要代码
						}).then(res => {
							const url = window.URL.createObjectURL(new Blob([res.data]));
							const link = document.createElement('a');
							link.href = url;
							const str = fileUrl.split(".")
							let fileName = item.remark+"."+str[str.length-1] //保存到本地的文件名称
							link.setAttribute('download', fileName);
							document.body.appendChild(link);
							link.click();
							console.log(link);
							link.remove();
						})
					}
				},
				onCheck(index){
					this.checkList.forEach((item, i) => {
						if(index==i){
							this.checkList[i].show = true;
						}else{
							this.checkList[i].show = false;
						}
						this.flag = index
					});
				},
				async onBut(book, addCode) {
					let that = this;
					this.show = false;
					const param={
						"booksId": book.id,
						"type": this.flag == 0?1:2,
						"valueAddedCode": addCode
					}
					const url = this.apiUrl+"/booksApi/TrialReading"
					await axios({
						method: "post",
						url: url,
						responseType: 'blob',
						data:param
					}).then(function (res) {
						that.addCode = '';
						that.checkList[0].show = true;
						that.checkList[1].show = false;
						const blob = new Blob([res.data])
						const reader = new FileReader()
						reader.readAsText(blob, 'utf-8')
						reader.onload = () => {
							try {
								if (reader.result) {
									const result = JSON.parse(reader.result)
									console.log(result)
									if (result.msg) {
										alert(result.msg)
									} else {
										showPdf(blob)
									}
								}
								
							} catch (e) {
								showPdf(blob)
							}
						}

					})
					// this.heaList.push("增值服务")
				},
				downloadFile(fileUrl,title){
					let that = this;
					that.isLoadingShow = true
					axios(fileUrl, {//pdf的位置
						responseType: 'blob', //重要代码
					}).then(res => {
						const url = window.URL.createObjectURL(new Blob([res.data]));
						const link = document.createElement('a');
						link.href = url;
						const str = fileUrl.split(".")
						let fileName = title+"."+str[str.length-1] //保存到本地的文件名称
						link.setAttribute('download', fileName);
						document.body.appendChild(link);
						link.click();
						console.log(link);
						link.remove();
						that.isLoadingShow = false
					})
				},
			}
		};
		Vue.createApp(App).mount('#app');
		function showPdf(blob){
			const objectUrl = URL.createObjectURL(blob) // 创建URL
			const PDFData = objectUrl.replace("data:application/pdf;base64,", "");
			sessionStorage.setItem("file", PDFData);
			window.open("./js/pdfjs/web/viewer.html?file="+PDFData,"_blank");
		}
	</script>

	<style>
		.sales_zone{
			display: flex;
			margin: 0 3rem;
		}
		.sales_zone_nav{
			margin-right: 0.3rem;
		}
		.sales_zone_nav .titles{
			width: 3.3rem;
			height: 0.88rem;
			background-image: url("img/back2.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			display: flex;
			align-items: center;
			padding-left: 0.3rem;
			margin: 0 0.01rem;
		}
		.sales_zone_nav .titles .p1{
			font-size: 0.24rem;
			color: #fff;
			font-weight: 600;
			letter-spacing: 0.01rem;
			margin-bottom: 0.1rem;
			
		}
		.sales_zone_nav .titles .p2{
			font-size: 0.13rem;
			color: #fff;
			font-weight: 600;
			line-height: 0.12rem;
		}
		
		.sales_zone_cont{
			flex: 1;
			margin-top: 0.2rem;
		}
		.sales_zone_cont_title{
			margin-bottom: 0.2rem;
		}
		.sales_zone_cont_titles{
			display: flex;
			align-items: center;
			margin-bottom: 0.3rem;
		}
		.sales_zone_cont_titles p{
			font-size: 0.32rem;
			font-weight: 600;
		}
		.sales_zone_cont_titles img{
			width: 0.16rem;
			margin-right: 0.1rem;
		}
		.sales_zone_cont_title_back{
			width: 100%;
			height: 0.1rem;
		}
		
		.b3 {
			display: block;
			width: 1.2rem;
			line-height: 0.48rem;
			font-size: 0.16rem;
			font-weight: 400;
			color: #203051;
			padding-left: 0.19rem;
			background: url(./img/a9.png) 0.95rem center no-repeat;
			border: 0.01rem solid #203051;
			cursor: pointer;
			position: absolute;
			right: 0.1rem;
			top: 50%;
			transform: translate(0 ,-50%);
		}
		.code{
			text-align: center;
			padding: 0.3rem 0 1.6rem;
		}
		.code img{
			width: 2.6rem;
			height: 2.6rem;
			margin-bottom: 0.1rem;
		}
		.code p{
			color: #233052;
			font-size: 0.16rem;
		}
		.book_list{
			margin-top: 0.07rem;
			background-color: #f3f3f3;
		}
		.book_list ul{
			margin-bottom: 0.1rem;
		}
		.book_list ul li{
			border-bottom: 0.01rem solid #ddd;
			padding: 0.22rem 0.14rem;
			display: flex;
			align-items: center;
			cursor: pointer;
		}
		.book_list ul li img{
			width: 1rem;
			height: 1.4rem;
			margin-right: 0.2rem;
		}
		.book_list ul li .content{
			flex: 1;
			position: relative;
		}
		.book_list ul li .content .title{
			font-size: 0.22rem;
			margin-bottom: 0.2rem;
			letter-spacing: 0.01rem;
			color: #333;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: space-between;
			word-wrap: break-word;
			line-height: 0.3rem
		}
		.book_list ul li .content .text{
			font-size: 0.17rem;
			letter-spacing: 0.01rem;
			margin-bottom: 0.16rem;
			color: #656565;
		}
		.book_list ul li .content .text span{
			font-size: 0.2rem;
			font-weight: bold;
			letter-spacing: 0.01rem;
			color: #ae0e16;
			margin-right: 0.2rem;
		}
		.texts{
			display: flex;
			align-items: center;
			margin-top: 0.2rem;
		}
		.texts .p1{
			width: 0.7rem;
			height: 0.3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 0.14rem;
			background-color: #ae0e16;
			margin-right: 0.2rem;
		}
		.texts .p2{
			width: 0.7rem;
			height: 0.3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 0.14rem;
			background-color: #203051;
			margin-right: 0.2rem;
		}
		.texts .p3{
			width: 0.7rem;
			height: 0.3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 0.14rem;
			background-color: #492a27;
			margin-right: 0.2rem;
		}
		
		.four_categories{
			margin-top: 0.36rem;
		}
		.four_categories .header{
			width: 100%;
			display: flex;
			align-items: center;
			background-color: #f3f3f3;
		}
		.four_categories .header li{
			padding: 0.1rem 0.3rem;
			font-size: 0.18rem;
			font-weight: 600;
			cursor: pointer;
		}
		.four_categories .header .cur{
			background-color: #ae0e16;
			color: #fff;
		}
		.four_categories .content{
			padding: 0.3rem 0;
		}
		.give_service_to{
			padding-bottom: 1rem;
			margin-top: 0.35rem;
		}
		.give_service_to ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			/*justify-content:space-between;*/
			padding: 0 0.5rem;
		}
		.give_service_to ul li{
			width: 21%;
			text-align: center;
			padding: 0.3rem 0;
			margin-right: 0.4rem;
		}
		.give_service_to ul li:nth-last-child(4){
			margin-right: 0;
		}
		.give_service_to ul li .imgs{
			 width: 100%;
			 margin-bottom: 0.14rem;
			 border-radius: 0.1rem;
			 padding: 0.3rem 0;
			border: 0.01rem solid #213052;

		}
		.give_service_to ul li img{
			width: 30%;
		}
		.give_service_to ul li p{
			font-size: 0.2rem;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #213052;
			line-height: 0.2rem;
		}
		/* 遮罩层*/
		.mask {
			background-color: rgba(0,0,0,0.7);
			/* 使用固定定位让元素撑满全屏 */
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.mask .xcx_box {
			border-radius: 0.2rem;
			width: 3rem;
			background-color: #fff;
			padding: 0.4rem 0.4rem 0.6rem;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			text-align: center;
		}
		.mask .xcx_box .title{
			font-size: 0.18rem;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #ae0e16;
			line-height: 0.3rem;
		}
		/* 登录窗口 */
		.mask .bullet_box {
			border-radius: 0.2rem;
			width: 7rem;
			background-color: #fff;
			padding: 0.4rem 0.4rem 0.6rem;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		
		.mask .bullet_box .title{
			font-size: 0.3rem;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #213052;
			line-height: 0.3rem;
			text-align: center;
			margin-bottom: 0.58rem;
		}
		.mask .bullet_box .checkbox{
			display: flex;
			align-items: center;
			margin: 0 0.5rem;
		}
		.mask .bullet_box .checkbox_item{
			display: flex;
			align-items: center;
			width: 58%;
			cursor: pointer;
		}
		.mask .bullet_box .checkbox_item img{
			width: 0.2rem;
			height: 0.2rem;
			margin-right: 0.1rem;
		}
		.mask .bullet_box .checkbox_item span{
			font-size: 0.2rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #000000;
			line-height: 0.24rem;
		}
		.mask .input{
			height: 0.58rem;
			border: 0.01rem solid #D2D2D2;
			display: flex;
			align-items: center;
			padding: 0 0.18rem;
			margin: 0.36rem 0.5rem 0;
		}
		.mask .input input{
			border: none;
			width: 100%;
		}

		.mask .video{
			background-color: #fff;
			padding: 0.4rem 0.4rem 0.6rem;
			position: fixed;
			width: 4rem;
			height:4rem;
			top:50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}

		.mask .video video{
			width: 100%;
			height: 100%;
		}

		.button{
			margin: 0.35rem 0.5rem 0;
		}
		.button button{
			width: 100%;
			height: 0.58rem;
			background-color: #203051;
			color: #fff;
			cursor: pointer;
		}
		.close{
			width: 0.20rem;
			height: 0.20rem;
			position: absolute;
			top: -0.2rem;
			right: -0.2rem;
			cursor: pointer;
		}
		.nav_list{
		}
		.nav_list ul li{
			height: 0.7rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0.3rem;
			border: 0.01rem solid #eee;
			border-top: none;
			cursor: pointer;
			
		}
		.nav_list_left{
			display: flex;
			align-items: center;
		}
		.nav_list ul li .img1{
			width: 0.14rem;
			margin-right:0.2rem;
		}
		.nav_list ul li .img2{
			width: 0.07rem;
			margin-left: 0.12rem;
		}
		.nav_list ul li span{
			font-size: 0.17rem;
		}
		
	</style>
</html>
